<template>
    <el-row>
        <el-col class="btn right">
            <el-dialog :visible.sync="dialogVisible" width="1300px"  :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}} &nbsp;&nbsp;&nbsp;&nbsp;{{xnxq}}</span>
                </div>
                <el-form ref="lineForm" :model="lineForm" class="reset-form" :label-width="labelWidth">
                    <el-col class="box box-align-center">
                        <el-form-item label="专业范围">
                            <el-select filterable v-model="lineForm.zydm" placeholder="请选择" class="text" @change="handleZySelect">
                                <el-option label="全部专业" value=""></el-option>
                                <el-option :label="item.zymc" :value="item.zydm+'-'+item.zymc"
                                    v-for="(item,index) in zyList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学级范围">
                            <el-select v-model="lineForm.xj" placeholder="" class="text" @change="handleXjSelect">
                                <el-option label="全部学级" value=""></el-option>
                                <el-option :label="`${item}级`" :value="item" v-for="(item,index) in xjList"
                                    :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="box box-align-center">
                        <el-form-item label="统计单位">
                            <el-select v-model="lineForm.unitType" placeholder="请选择" class="text" @change="handleUnitSelect">
                                <el-option :label="item.title" :value="item.unitType+'-'+item.title" v-for="(item,index) in rsUnitList"
                                    :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" label-width="20px" class="reset">
                            <el-form-item>
                                <el-radio v-model="lineForm.type" label="0" @change="setNumber">按数量</el-radio>
                                <el-radio v-model="lineForm.type" label="1" @change="blur">按比例</el-radio>
                                <el-input maxlength="3" v-model="lineForm.value" placeholder="" @input="blur"
                                    @keyup.native="lineForm.value=(lineForm.value).toString().replace(/[^\d.]/g,'');"
                                    v-if="lineForm.type == `1`" style="width: 97px;" />
                                <el-input maxlength="5" v-model="lineForm.value" placeholder="" @input="setNumber"
                                    @keyup.native="lineForm.value=(lineForm.value).toString().replace(/[^\d.]/g,'');"
                                    v-if="lineForm.type == `0`" style="width: 97px;" />
                            </el-form-item>
                        <el-button class="reset-comfirm-btn" @click="searchScore" >查询</el-button>
                        </el-form-item>
                    </el-col>
                  <!--  <el-col class="box box-align-center dia">
                        <el-form-item label="成绩组合项">
                            <div class="user-list radio">
                                <el-col class="box box-tb2 box-pack-start">
                                    <el-checkbox v-model="lineForm.kcChecked">
                                        <div class="list box box-align-center">
                                            <span class="mr10">课程任务权重</span>
                                            <el-input maxlength="3" v-model="lineForm.cousPercent" placeholder=""
                                                @input="setKc"
                                                @keyup.native="lineForm.cousPercent=(lineForm.cousPercent).toString().replace(/[^\d.]/g,'');"
                                                style="width: 60px;" />
                                            <span class="ml10">分</span>
                                        </div>
                                    </el-checkbox>
                                    <el-checkbox v-model="lineForm.sjChecked">
                                        <div class="list box box-align-center">
                                            <span class="mr10">实践任务权重</span>
                                            <el-input maxlength="3" v-model="lineForm.ldsjPercent" placeholder=""
                                                @input="setSj"
                                                @keyup.native="lineForm.ldsjPercent=(lineForm.ldsjPercent).toString().replace(/[^\d.]/g,'');"
                                                style="width: 60px;" />
                                            <span class="ml10">分</span>
                                        </div>
                                    </el-checkbox>
                                    <el-checkbox v-model="lineForm.fjChecked">
                                        <el-col class="box box-pack-betweem box-align-center btn">
                                            <el-col class="box box-align-center">
                                                <div class="list box box-align-center">
                                                    <span class="mr20">附加项</span>
                                                    <el-input maxlength="3" v-model="lineForm.attchPercent" placeholder=""
                                                        @input="setAttch"
                                                        @keyup.native="lineForm.attchPercent=(lineForm.attchPercent).toString().replace(/[^\d.]/g,'');"
                                                        style="width: 60px;" />
                                                    <span class="ml10">分</span>
                                                    <span class="ml10">（附加项根据劳动数、获得赞赏数计算）</span>
                                                </div>
                                            </el-col>
                                        </el-col>
                                    </el-checkbox>
                                </el-col>
                            </div>
                        </el-form-item>
                    </el-col> -->
                </el-form>
                <el-col>
                    <el-table :data="bfList" stripe style="width: 100%" height="400px"
                        :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                        <el-table-column prop="xj" label="学级" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column prop="zymc" label="专业" :show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column prop="bjmc" label="班级" :show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column prop="sn" label="学号" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="cousScore" label="课程分" width="120" align="center"></el-table-column>
<!--                        <el-table-column prop="ldsjScore" label="实践任务得分" width="120" align="center"></el-table-column>
                        <el-table-column prop="attchScore" label="附加项得分" width="120" align="center"></el-table-column>
                        <el-table-column prop="zongheScore" label="综合得分" width="120" align="center"></el-table-column> -->
                    </el-table>
                </el-col>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()" :disabled="disabledbtn">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '调取学生劳动课成绩'
            },
            xnxq:{

            },
            zsId:{

            },
            zsName:{

            }
        },
        data() {
            return {
                page: {
                    list: [{
                        trName: ''
                    }]
                },
                checkedTrs: [],
                isIndeterminate: true,
                zyList: [],
                xjList: [],
                rsUnitList: [{
                        unitType: 0,
                        title: '校级'
                    },
                    {
                        unitType: 1,
                        title: '专业'
                    },
                    {
                        unitType: 2,
                        title: '班级'
                    }
                ],
                user: this.$store.state.user,
                scoreList: [],
                lineForm: {
                    zydm: '',
                    zymc:'',
                    xj: '',
                    name: '',
                    unitType: '0-校级',
                    unitTitle:'校级',
                    type: '0', //0 人数  1 比例
                    value: 10,
                    cousPercent:100,
                    ldsjPercent:50,
                    attchPercent:20,
                    fjChecked:false,
                    kcChecked:true,
                    sjChecked:true
                },
                labelWidth: '100px',
                schoolid: this.$store.state.schoolId,
                disabledbtn:true,
                bfList:[]
            }
        },
        mounted() {
            this.setData()
        },
        methods: {
            setData() {
                this.getZyList()
                this.getXjList()
            },
            getZyList() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getZyList(params).then(res => {
                    if (res.code == '0') {
                        this.zyList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getXjList() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getXjList(params).then(res => {
                    if (res.code == '0') {
                        this.xjList = res.list;
                        this.lineForm.xj = res.list[0]
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            blur() {
                if (this.lineForm.value > 100) {
                    this.lineForm.value = 100
                }
                if (this.lineForm.value < 100) {
                    this.lineForm.value = Number(this.lineForm.value)
                }
            },
            setKc() {
                if (this.lineForm.cousPercent > 100) {
                    this.lineForm.cousPercent = 100;
                    this.lineForm.ldsjPercent = 0
                }
                if (this.lineForm.cousPercent <= 100) {
                    this.lineForm.cousPercent = Number(this.lineForm.cousPercent)
                    this.lineForm.ldsjPercent = 100 - this.lineForm.cousPercent
                }
            },
            setSj() {
                if (this.lineForm.ldsjPercent > 100) {
                    this.lineForm.ldsjPercent = 100
                    this.lineForm.cousPercent = 0;

                }
                if (this.lineForm.ldsjPercent <= 100) {
                    this.lineForm.ldsjPercent = Number(this.lineForm.ldsjPercent)
                    this.lineForm.cousPercent = 100 - this.lineForm.ldsjPercent;
                }
            },
            setAttch() {
                if (this.lineForm.attchPercent > 20) {
                    this.lineForm.attchPercent = 20
                }
                if (this.lineForm.attchPercent < 20) {
                   this.lineForm.attchPercent = Number(this.lineForm.attchPercent)
                }
            },
            setNumber() {
                this.lineForm.value = Number(this.lineForm.value)
            },
            handleClose() {
                this.$emit('closeTk');
            },
            handleZySelect(e) {
                console.log(e);

                // console.log(this.zyList.indexOf(e));
                this.lineForm.zymc = e.split('-')[1]
            },
            handleXjSelect(e){
                console.log(e);
                this.lineForm.xj = e;
            },
            handleUnitSelect(e) {
                this.lineForm.unitTitle =  e.split('-')[1]
                console.log(this.lineForm.unitTitle);
            },
            searchScore() {
                let params = {
                    schoolId: this.schoolid,
                    xn: this.xnxq.split('-')[0],
                    xq: this.xnxq.split('-')[1].substr(0,3),
                    zydm: this.lineForm.zydm.split('-')[0],
                    zymc:this.lineForm.zymc,
                    xj: this.lineForm.xj,
                    xjfw:this.lineForm.xj+'级',
                    certId:this.zsId,
                    name:this.zsName,
                    unitType:Number(this.lineForm.unitType.split('-')[0]),
                    unit:this.lineForm.unitTitle,
                    numType:Number(this.lineForm.type),
                    value:Number(this.lineForm.value),
                    hasCous:this.lineForm.kcChecked == true?1:0,
                    // hasLdsj:this.lineForm.sjChecked == true?1:0,
                    // hasAttch:this.lineForm.fjChecked == true?1:0,
                    cousPercent:this.lineForm.cousPercent,
                    // ldsjPercent:this.lineForm.ldsjPercent,
                    // attchPercent:this.lineForm.attchPercent
                };
                this.$api.Admin.searchScore(params).then(res => {
                    if (res.code == '0') {
                        console.log(res)
                        this.bfList = res.list;
                        if(this.bfList.length>0){
                            this.disabledbtn=false;
                        }
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            onSubmit() {
                this.$emit('backstulist',this.bfList,this.lineForm)
                this.handleClose();
            },
            handleCheckedChange(value) {
                let checkedCount = value.length;
                console.log(value);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .right>>>.el-radio__input.is-checked+.el-radio__label {
        color: #626BF1;
    }

    .right>>>.el-radio__input.is-checked .el-radio__inner {
        border-color: #626BF1;
        background-color: #626BF1;
    }

    .right>>>.el-radio__inner:hover {
        border-color: #626BF1;
    }

    .reset>>>.el-form-item__content {
        margin-left: 16px !important;
        display: flex;
        align-items: center;
        width: 300px;
    }

    .user-list {
        -webkit-box-orient: horizontal;
        .checkbox__label {
            width: 60%;
        }

        .list {
            padding: 0 0;
        }

        .item {
            // display: block;
            width: 100px;
            margin-right: 30px;
        }
    }

    .user-list>>>.el-checkbox {
        margin-bottom: 5px;
        display: flex;
    }

    .user-list>>>.el-checkbox__label {
        .list {
            display: flex;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__input.is-focus,
        {
        border-color: #626BF1;

        .el-checkbox__inner {
            border-color: #626BF1;
        }
    }

    .dia>>>.el-form-item, .dia>>>.el-checkbox__label {
        width: 100%;
    }

    .box-tb2{
            -webkit-box-direction: normal;
            -webkit-box-orient: vertical;
            flex-direction: horizontal;
    }
</style>
